import {useEffect, useState} from 'react'
import {Card, Table} from "antd";

const columns = [
    {title: 'id', dataIndex: 'id', key: 'id'},
    {title: '模型名称', dataIndex: 'modelName', key: 'modelName',},
    {title: '数据集名称', dataIndex: 'datasetName', key: 'datasetName'},
    {title: '实验次数', dataIndex: 'count', key: 'count'},
    {
        title: 'IOU最大值', dataIndex: 'jaccardIndexMax', key: 'jaccardIndexMean', render: (text) => {
            return text ? text.toPrecision(5) : null
        }
    },
    {
        title: 'IOU均值', dataIndex: 'jaccardIndexMean', key: 'jaccardIndexMean', render: (text) => {
            return text ? text.toPrecision(5) : null
        }
    },
    {
        title: 'IOU方差', dataIndex: 'jaccardIndexVariance', key: 'jaccardIndexVariance', render: (text) => {
            return text ? text.toPrecision(5) : null
        }
    },
]

const getData = async () => {
    const response = await fetch("/api/all", {method: 'GET'})

    return response.json()
}

/**
 * var auroc: BigDecimal? = null,
 *     var accuracy: BigDecimal? = null,
 *     var averagePrecision: BigDecimal? = null,
 *     var f1Score: BigDecimal? = null,
 *     var jaccardIndex: BigDecimal? = null,
 *     var precision: BigDecimal? = null,
 *     var recall: BigDecimal? = null,
 *     var specificity: BigDecimal? = null,
 *     var dice: BigDecimal? = null,
 * */

let allData = []

function App() {
    const expandedRowRender = (record) => {
        const render = (text) => text ? (text * 100).toPrecision(5) : null

        const columns = [
            {title: 'id', dataIndex: 'id', key: 'id'},
            {title: 'AUROC', dataIndex: 'auroc', key: 'auroc', render},
            {title: 'Accuracy', dataIndex: 'accuracy', key: 'accuracy', render},
            {title: 'Average Precision', dataIndex: 'averagePrecision', key: 'averagePrecision', render},
            {title: 'F1 Score', dataIndex: 'f1Score', key: 'f1Score', render},
            {title: 'Jaccard Index', dataIndex: 'jaccardIndex', key: 'jaccardIndex', render},
            {title: 'Precision', dataIndex: 'precision', key: 'precision', render},
            {title: 'Recall', dataIndex: 'recall', key: 'recall', render},
            {title: 'Specificity', dataIndex: 'specificity', key: 'specificity', render},
            {title: 'Dice', dataIndex: 'dice', key: 'dice', render},
        ];

        return <Table
            columns={columns}
            bordered
            dataSource={record.experienceDetailModels.map((item, index) => {
                item.key = index
                item.id = index + 1
                return item
            }).sort((a, b) => b.jaccardIndex - a.jaccardIndex)}
            pagination={false}
        />
    }

    const [data, setData] = useState([])

    const [baseTableColumn, setBaseTableColumn] = useState(columns)
    useEffect(() => {
        getData().then(
            (data) => {
                allData = data.map(item => {
                    item.key = item.id
                    // 计算 jaccardIndex 的均值和方差
                    item.count = item.experienceDetailModels.length
                    item.jaccardIndexMean = item.experienceDetailModels.reduce((acc, cur) => acc + cur.jaccardIndex, 0) / item.experienceDetailModels.length
                    item.jaccardIndexVariance = item.experienceDetailModels.reduce((acc, cur) => acc + (cur.jaccardIndex - item.jaccardIndexMean) ** 2, 0) / item.experienceDetailModels.length
                    item.jaccardIndexMax = item.experienceDetailModels.reduce((acc, cur) => Math.max(acc, cur.jaccardIndex), 0)
                    return item
                });
                setData(allData);
                const modelNames = [...new Set(data.map(item => item.modelName))]
                const datasetNames = [...new Set(data.map(item => item.datasetName))]
                const newColumns = [
                    ...columns
                ]

                newColumns[1] = {
                    ...newColumns[1],
                    filters: modelNames.map(item => ({text: item, value: item})),
                    onFilter: (value, record) => record.modelName === value
                }

                newColumns[2] = {
                    ...newColumns[2],
                    filters: datasetNames.map(item => ({text: item, value: item})),
                    onFilter: (value, record) => record.datasetName === value
                }

                setBaseTableColumn(newColumns)
            }
        )
    }, []);

    return (
        <Card style={{width: '100%', height: '100%'}} title="模型参数对照表">
            <Table
                columns={baseTableColumn}
                dataSource={data}
                bordered
                expandable={{
                    expandedRowRender,
                }}
                pagination={false}
            />
        </Card>
    )
}

export default App
